<template>
  <div>
    <h1>首页</h1>
    {{ name }}
    <input type="button" value="按钮" @click="add" />

    
    <table>
      <thead>
        <tr>
          <td>用户ID</td>
          <td>用户名</td>
          <td>用户密码</td>
        </tr>
      </thead>

      <tbody>
        <!-- 使用vue的循环语句 -->
        <tr v-for="user in userList" v-bind:key="user">
          <td>{{user.id}}</td>
          <td>{{user.name}}</td>
          <td>{{user.password}}</td>
        </tr>


      </tbody>

    </table>

  </div>
</template>
<script>
import axios from "axios"

export default {
  //定义数据
  data: function() {
    return {
      name: "dsk",
      userList: []
    };
  },
  //定义方法
  methods: {
    add: function() {
      //从后台获取数据
      axios
        .get("/api/test/t1") //http://127.0.0.1:8080/test/t1
        .then(function(respose) {
          console.log(respose);
        });
    }
  },
  //页面一加载就会执行的方法
  mounted: function() {
    var that = this;
    //从后台获取数据
    axios.get("/api/user/userList").then(function(respose) {
      console.log(respose);
      //设vue的用户集合数据为axios从后台获取到的用户数据
      that.userList = respose.data.data;
    });
  }
};
</script>



